<!--发布公示-->
<template>
  <div class="announce">
    <el-row>
      <span @click="announceFn">发布公示</span>
    </el-row>
    <el-row>
      <el-col :span="2">序号</el-col>
      <el-col :span="18">公示明细</el-col>
      <el-col :span="4">公示时间</el-col>
    </el-row>
    <el-row class="announceContent" v-for="(item,index) in list" :key="'d'+index">
      <el-col :span="2">{{index+1}}</el-col>
      <el-col :span="18" class="detail">
        <p>{{item.Content}}</p>
      </el-col>
      <el-col :span="4" class="time">{{item.UpdataTime}}</el-col>
    </el-row>
    <el-row v-if="list.length < 1" class="placeholderInfo">
      <p>暂无公示</p>
    </el-row>
    <el-dialog
      class="announceDialog"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%">
      <p slot="title" class="title">公示信息</p>
      <el-input type="textarea" v-model="desc" maxlength="300" placeholder="请输入内容..." show-word-limit></el-input>
      <p class="info">注: 加时请至少提前10分钟完成设置，一旦提交将显示在实时监控区域。</p>
      <p slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取 消</el-button>
        <!--        <el-button @click="nextFn" class="next">下一步延时设置</el-button>-->
        <el-button type="primary" @click="addexamnoticeFn" class="sure">确定公示</el-button>
      </p>
    </el-dialog>
  </div>

</template>

<script>
  import {mapGetters,mapActions} from "vuex";

  export default {
    name: "announce",
    data() {
      return {
        list: [],
        dialogVisible: false,
        desc: '',//公示信息
      }
    },
    computed: {
      ...mapGetters({
        userInfo: ["userInfo"],
        msgList: ["onGetCurrentChatObjMsg"], //接收到的信息列表
      })
    },
    created() {
      this.getexamnoticelistFn()
    },
    methods: {
      //获取公告列表
      getexamnoticelistFn() {
        let params = {
          taskId: this.userInfo.TaskId,
        };
        this.$api.examNoticeService.getexamnoticelist(params).then(res => {
          // console.log(res,'公示列表');
          if (res.Code == 200) {
            res.Data.forEach(v => {
              v.UpdataTime = v.CreateTime.split('T')[0].split('-').join('.') + ' ' + v.CreateTime.split('T')[1].split('.')[0]
            })
            this.list = res.Data
          }
          // this.dialogVisible = false
        }).catch(err => {
          console.log(err, 'err');
        })
      },
      //发布公示
      addexamnoticeFn() {
        if (!this.desc) {
          this.$notify.info({
            title: "提示",
            message: '公示内容不能为空！',
            duration: 2000
          });
          return;
        }
        let params = {
            taskId: this.userInfo.TaskId,
            content: this.desc,
        };
        // 123790649524225
        this.$api.examNoticeService.addexamnotice(params).then(res => {
          // console.log(res,'发布公示');
          if (res.Code == 200) {
            this.dialogVisible = false;
            this.getexamnoticelistFn();
            let obj = {
              type: "announceMsg",
              content: {
                msg: this.desc,
              }
            };
            this.onSendText({
              chatType: 'group',
              chatId: { groupid: this.userInfo.TaskImGroupId.toString()},
              message: JSON.stringify(obj),
              userId:this.userInfo.Id
            });
          }

        }).catch(err => {
          console.log(err, 'err');
        })
      },
      //点击发布公告
      announceFn() {
        this.dialogVisible = true;
        this.desc = '';
      },
      //下一步延时设置
      nextFn() {
        this.dialogVisible = false;
        this.$emit('nextFn')
      },
      ...mapActions([
        "onGetPracticeGroupList", //查询群聊列表
        "onSendText", //发送消息
        "getHistoryMessage", //获取历史信息
        "recallMessage" //撤回消息
      ])
    }
  }
</script>

<style lang="less">
  .announce {
    box-sizing: border-box;
    padding: 50px 30px;

    .el-row:nth-of-type(1) {
      text-align: right;
      margin-bottom: 20px;

      span {
        display: inline-block;
        width: 188px;
        height: 42px;
        background: linear-gradient(90deg, rgba(2, 169, 254, 1) 0%, rgba(6, 136, 250, 1) 100%);
        box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.1);
        border-radius: 2px;
        filter: blur(0px);
        font-size: 14px;
        font-family: PingFangHK-Medium, PingFangHK;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 42px;
        text-align: center;
        cursor: pointer;
      }
    }

    .el-row:nth-of-type(2) {
      .el-col {
        font-size: 14px;
        font-family: PingFangHK-Medium, PingFangHK;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        padding: 20px 0;
        text-align: center;
      }
    }

    .announceContent {
      border-top: 1px solid rgba(235, 235, 235, 1);
      display: flex;

      .el-col {
        padding: 10px 20px;
        min-height: 138px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 14px;
        font-family: PingFangHK-Regular, PingFangHK;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }

      .detail {
        box-sizing: border-box;
        text-align: left;
        line-height: 28px;
        p{
          /*word-wrap: break-word !important;*/
          word-break: break-all;
          width: 100%;
        }
      }

      .time {
        color: rgba(153, 153, 153, 1);
      }
    }
    .placeholderInfo{
      min-height: 400px;
      p{
        text-align: center;
        margin-top: 250px;
        font-size: 18px;
      }
    }
    .announceDialog {
      .el-dialog {
        margin-top: 35vh !important;

        .el-dialog__header {
          .title {
            font-size: 18px;
            font-family: PingFangHK-Medium, PingFangHK;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
        }

        .el-dialog__body {
          padding-top: 0;
          padding-bottom: 7px;

          textarea {
            min-height: 130px !important;
            border-radius: 2px;
            border: 1px solid rgba(239, 239, 239, 1);
            font-size: 14px;
            font-family: PingFangHK-Regular, PingFangHK;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 20px;
            box-sizing: border-box;
            padding: 12px 16px;
          }

          .info {
            font-size: 12px;
            font-family: PingFangHK-Regular, PingFangHK;
            font-weight: 400;
            color: rgba(221, 71, 71, 0.8);
            line-height: 17px;
            margin-top: 10px;
          }
        }

        .el-dialog__footer {
          .dialog-footer {
            .el-button {
              font-size: 14px;
              font-family: PingFangHK-Regular, PingFangHK;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              text-align: center;
            }

            .el-button--text {
              color: rgba(153, 153, 153, 1);
            }

            .next {
              width: 118px;
              height: 38px;
              background: rgba(255, 255, 255, 1);
              border-radius: 2px;
              border: 1px solid rgba(4, 151, 248, 1);
              color: rgba(4, 151, 248, 1);
              padding: 12px 8px;
            }

            .sure {
              width: 118px;
              height: 38px;
              background: linear-gradient(90deg, rgba(2, 169, 254, 1) 0%, rgba(6, 136, 250, 1) 100%);
              box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.1);
              border-radius: 2px;
              filter: blur(0px);
              color: rgba(255, 255, 255, 1);
            }
          }

        }

      }
    }
  }

</style>
